<script setup lang="ts">
import { h } from "vue";
import { Plus } from "@element-plus/icons-vue";
import { ElButton } from "element-plus";

import EnumTag from "@/components/common/EnumTag.vue";
import DialogSpecModify from "./components/DialogSpecModify.vue";

import useModal from "@/hooks/useModal";
import useProTable from "@/hooks/useProTable";
import { EnumStatus } from "@/utils/enum";
import ApiActivity from "@/api/activity";

const tableColumns = [
  { label: "序号", type: "index", width: 70 },
  { label: "规格名称", prop: "spec_name", minWidth: 120 },
  {
    label: "规格内容",
    prop: "spec_value",
    minWidth: 120,
    slot: ({ row }: any) => decodeURIComponent(row.spec_value),
  },
  // { label: "是否日期格式", slot: "is_date", width: 120 },
  {
    label: "状态",
    width: 120,
    slot: ({ row }: any) =>
      h(EnumTag, {
        options: EnumStatus,
        value: row.status,
      }),
  },
  // { label: "排序", prop: "sort", width: 120 },
  { label: "备注", prop: "remark", minWidth: 160 },
  {
    label: "操作",
    width: 160,
    slot: ({ row }: any) =>
      h(
        ElButton,
        {
          link: true,
          type: "primary",
          onClick: () => modalApi.open(row),
        },
        "编辑"
      ),
  },
];

const [ProTable, { tableApi }] = useProTable({
  fetchUrl: ApiActivity.specList,
  tableOptions: {
    columns: tableColumns,
  },
});

const [Modal, modalApi] = useModal({
  width: "500px",
  title: (source: any) => (source?.id ? "编辑规格" : "新增规格"),
});
</script>

<template>
  <div class="mb-3 text-right"></div>

  <ProTable>
    <template #tool-left>
      <ElButton
        :icon="Plus"
        size="large"
        type="primary"
        @click="modalApi.open()"
        >新增规格
      </ElButton>
    </template>
  </ProTable>

  <!-- <template #is_date="{ row }">
        <ElTag :type="getSpecIsTime(row.is_date, 'color')">{{
          getSpecIsTime(row.is_date, "label")
        }}</ElTag>
      </template> -->

  <Modal>
    <DialogSpecModify @success="tableApi.refresh" />
  </Modal>
</template>
